<template>
  <view class="cashRead" v-if="cash.length>0">
    <!-- 	<u-navbar :title="'答题页面'" :placeholder="true" @leftClick="leftClick" :autoBack="true">
		</u-navbar> -->
    <view class="">
      <!-- title -->
      <view class="cash-title">
        {{cash[nextOrder].title}}
      </view>
      <view class="conversaBox">
        <!-- conversation BOX-->
        <view class="conversa">
          <view class="linebox">
            <view class="conversaTxt" v-for="item in cash[nextOrder].coversine" :key="item.nextOrder"
              :style="{flexDirection:(item.mode=='right'?'row-reverse':(item.mode=='center'?'column':''))}">
              <template v-if="item.mode=='center'">
                <view class="" style="text-align: center;font-size: 24rpx;padding-top: 10rpx;">
                  <text class="center-text">{{item.content}}</text>
                </view>
              </template>
              <template v-else>
                <view class="avatarbox">
                  <img :src="item.avtarImg" />
                </view>
                <view class="name-text" :style="{marginRight:(item.mode=='right'?'14rpx':'0')}">
                  <view class="name" :style="{textAlign:item.mode}">
                    {{item.name ||'老板'}}
                  </view>
                  <view class="text"
                    :style="(item.mode=='right'?'border-top-right-radius:0':'border-top-left-radius:0')">
                    {{item.content}}
                  </view>
                </view>
              </template>
            </view>
          </view>
        </view>
        <!-- seletion -->
        <view class="select-box" v-if="cash[nextOrder].options.length">
          <uni-icons type="back" color="white" size="30" @click="lastQues"></uni-icons>
          <view class="" style="display: flex;flex-direction: column;justify-content: center;">
            <view class="select" v-for="(opt,opIndex) in cash[nextOrder].options" :key="opIndex">
              <view class="" style="width: 540rpx;position: relative;">
                <u-button shape="circle" plain :color="butAction==opIndex?'#007bff':'black'" :text="opt.select"
                  @click="seletClick(opt,opIndex)"></u-button>
                <uni-icons v-if="butAction===opIndex" style="position: absolute;top: 15rpx;right: 26rpx;"
                  type="checkmarkempty" color="black" size="26"></uni-icons>
              </view>
            </view>
          </view>
          <uni-icons type="forward" color="white" size="30" @click="nextQues(nextOrder_1)"></uni-icons>
        </view>
      </view>
    </view>


    <image src="../../static/collected.png" class="collection_img" v-if="collection" @click.stop="collectionChange">
    </image>
    <image src="../../static/collect.png" class="collection_img" v-else @click.stop="collectionChange"></image>
  </view>
</template>

<script>
  import {
    store
  } from '../../uni_modules/uni-id-pages/common/store';
  export default {
    data() {
      return {
        nextOrder: 0,
        cashID: '', //案例的ID 
        cash: [], //数据
        showEnd: false,
        butAction: null,
        endMessage: '',
        score: 0,
        collection: false, //是否被收藏
        nextOrder_1: null, //中转选项下标
        lashIndexList: [0], //记录上一题的题目下标
      };
    },
    computed: {
      userInfo() {
        return store.userInfo
      },
      // direction(mode) {
      // 	let obj = {}
      // 	if (mode == 'right') obj = {
      // 		flexDirection: "row-reverse"
      // 	}
      // 	return obj
      // }
    },
    async onLoad(op) {
      console.log("接收案例ID", op);
      this.cashID = op.cash_id
      await this.getCash(this.cashID)
      if (this.cash.length == 0) {
        uni.showToast({
          title: '无内容，返回',
          icon: 'error'
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)

      }
      setTimeout(() => {
        //浏览量加一
        this.addView()
      }, 10000)
      this.getCollection()
    },
    methods: {
      addView() {
        uniCloud.callFunction({
          name: "getCashRead",
          data: {
            flag: 6,
            cashID: this.cashID,
          }
        })
      },
      rightClick() {
        console.log('rightClick');
      },
      leftClick() {
        uni.navigateBack(1)
        console.log('leftClick');
      },
      getCollection() {
        uniCloud.callFunction({
          name: "getCashRead",
          data: {
            userID: store.userInfo._id,
            cashID: this.cashID,
            flag: 1
          }
        }).then((res) => {
          this.collection = res.result
        })
      },
      collectionChange() {
        console.log(this.collection)
        if (this.collection) {
          uniCloud.callFunction({
            name: "getCashRead",
            data: {
              flag: 3,
              cashID: this.cashID,
              userID: store.userInfo._id
            }
          })
          this.collection = false
        } else {
          uni.showLoading({
            title: "收藏中..."
          })
          uniCloud.callFunction({
            name: "getCashRead",
            data: {
              flag: 4,
              cashID: this.cashID,
              userID: store.userInfo._id
            }
          }).then(res => {
            uni.showToast({
              title: "收藏成功",
              icon: "none"
            })
            this.collection = true
            uni.hideLoading()
          })
        }
      },
      seletClick(e, opIndex) {
        this.butAction = opIndex
        this.nextOrder_1 = e.nextOrder
      },
      getCash(cashID) {
        return new Promise((resolve) => {
          uni.showLoading({
            mask: true
          })
          uniCloud.callFunction({
            name: "getCashRead",
            data: {
              cashID,
              flag: 2
            }
          }).then(res => {
            this.cash = res?.result?.data?.[0]?.data || []
            uni.hideLoading()
            resolve()
          })
        })

      },
      clickGoOn() {
        if (this.cash.options.length === 0 && !this.showEnd)
          this.nextTopic()
      },
      endORnext(opt, sel_score) {
        this.score = Number(this.score + sel_score)
        if (opt && opt.options && opt.options.length) {
          this.cash = opt
        } else {
          let endMessage = '无'
          if (opt?.title) endMessage = opt.title
          this.endMessage = endMessage
          this.showEnd = true
          // 记录完成状态、 
          this.recordFinishedCash()
        }
        this.$forceUpdate()
      },
      recordFinishedCash() {
        uniCloud.callFunction({
          name: "getCashRead",
          data: {
            flag: 5,
            cashID: this.cashID,
            userID: store.userInfo._id
          }
        }).then(res => {
          console.log(res, "已记录完成状态");
        })
      },
      nextQues(nextOrder_1, index) {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        })
        if (nextOrder_1 > this.cash.length) {
          return uni.showToast({
            title: '已经是最后一题了',
            icon: 'none'
          });
        }
        if (nextOrder_1 == null) {
          return uni.showToast({
            title: '请先选择',
            icon: 'none'
          });
        }
        this.butAction = null
        // if (this.nextOrder === nextOrder_1 - 1) {
        // 	uni.showToast({
        // 		title: `已经是第${nextOrder_1}题了`,
        // 		icon: "none"
        // 	});
        // }
        this.nextOrder = nextOrder_1 - 1
        this.$forceUpdate()
        this.lashIndexList.push(this.nextOrder)
      },
      lastQues() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        })
        this.butAction = null
        if (this.lashIndexList.length === 2) {
          return uni.showToast({
            title: '已经是第一题了',
            icon: 'none'
          });
        }
        // console.log(this.lashIndexList);
        this.nextOrder = this.lashIndexList[this.lashIndexList.length - 2]
        this.$forceUpdate()

        this.lashIndexList.pop()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .cashRead {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    // margin-top: -10vh;
    background-color: #f0f0f0;
    padding: 0 20rpx;


    .cash-title {
      background-color: white;
      border-radius: 20rpx;
      text-align: justify;
      // width: 94%;
      padding: 40rpx 28rpx;
      margin: 20rpx 0;
      /* font-size: 31rpx; */
      // font-weight: 600;
      box-sizing: border-box;
      line-height: 1.6em;
      letter-spacing: 2rpx;
    }

    .conversaBox {
      border-top-right-radius: 40rpx;
      border-top-left-radius: 40rpx;
      background-image: linear-gradient(180deg, #14c1b8, #0b867f);
      ;
      width: 100%;
      min-height: 85vh;

      .conversa {
        .linebox {
          padding: 40rpx 20rpx;
          min-height: 50vh;

          .conversaTxt {
            display: flex;
            color: white;
            width: 670rpx;
            padding-bottom: 16rpx;

            .center-text {
              // color: black;
              // border-radius: 22rpx;
              // // border-top-left-radius: 0rpx;
              // background-color: white;
              // padding: 20rpx;
              width: 420rpx;
              text-align: justify;
            }

            .avatarbox {
              width: 80rpx;
              height: 80rpx;

              img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 100%;
                // object-fit: cover;
              }
            }

            .name-text {
              margin-left: 14rpx;

              .name {
                font-size: 26rpx;
                padding: 10rpx 0;
              }

              .text {
                color: black;
                border-radius: 22rpx;
                // border-top-left-radius: 0rpx;
                background-color: white;
                padding: 20rpx;
                width: 420rpx;
                text-align: justify;
              }
            }
          }

        }

      }
    }


    .select-box {

      display: flex;
      align-items: center;
      padding-bottom: 36rpx;

      .select {
        padding: 16rpx 10rpx;
        padding-bottom: 0;

        ::v-deep .u-button__text {
          // color: black !important;
        }

        ::v-deep .u-button__text {
          white-space: pre-wrap !important;
          line-height: 1.4 !important;
        }

        ::v-deep .u-button {
          height: fit-content !important;
          // width: 600rpx !important;
          min-height: 80rpx !important;
          padding: 20rpx 0rpx !important;
        }
      }
    }



    .go-on {
      margin-top: 20rpx;
      margin-right: 28rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      font-size: 2;
      font-size: 26rpx;
    }

    .endCard {
      padding: 60rpx 30rpx;
      background-color: white;
      text-align: justify;
      display: flex;
      /* justify-content: center; */
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 95%;
      box-sizing: border-box;
      border-radius: 20rpx;

      .end-title {
        background-color: #007bff;
        font-weight: 600;
        position: absolute;
        top: -30rpx;
        color: white;
        width: 200rpx;
        height: 60rpx;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .score-card {
        font-size: 36rpx;
        padding-bottom: 20rpx;
      }

    }

    .collection_img {
      height: 50rpx;
      width: 50rpx;
      position: fixed;
      bottom: 450rpx;
      right: 40rpx;
    }
  }
</style>